<template>
  <view class="page page-grey page-aftersale-view" :class="{'has-fixed-footer': aftersaleStatus.operations}">
    <view class="aftersale-view-block status-wrapper">
      <view class="status-tips">
        <view class="status-desc">
          <fui-text :style="{display: desc.isWrap ? 'block' : 'inline'}" v-for="(desc, index) in aftersaleStatus.descriptions" :key="index" :text="desc.text" size="36" fontWeight="bold" :color="desc.color"></fui-text>
        </view>
        <view class="status-tips-price"><fui-text text="￥" size="24" fontWeight="bold" color="#EA5750"></fui-text><fui-text :text="utils.moneyFormatter(99.23)" size="36" fontWeight="bold" color="#EA5750"></fui-text></view>
      </view>
      <view class="status-datetime"><fui-text text="2024年7月11日 15:03:45" size="24" color="#666"></fui-text></view>
    </view>
    <view-detail :aftersaleData="aftersaleData"></view-detail>
    <view class="page-btn-wrapper white ui-fixed-footer" v-if="aftersaleStatus.operations">
      <fui-button v-for="(btn, index) in aftersaleStatus.operations" :key="index" :text="btn.text" @click="handleClickBtn(btn)" :class="btn.className" height="78rpx" radius="8rpx"></fui-button>
    </view>

    <fui-actionsheet :show="isShowActionSheet" :itemList="aftersaleStatus.actionsheets ? aftersaleStatus.actionsheets : []" @click="onActionSheetClick" @cancel="onActionSheetCancel"></fui-actionsheet>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import { AFTERSALE_VIEW_STATUS } from './view'
import viewDetail from './detail'
import utils from '@/components/firstui/fui-utils'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

const aftersaleId = ref('')
const aftersaleCode = ref(null)
const aftersaleStatus = computed(() => aftersaleCode.value ? AFTERSALE_VIEW_STATUS[aftersaleCode.value] : {})
onLoad(option => {
  aftersaleId.value = option.aftersaleId
  aftersaleCode.value = 24
  setTitle(aftersaleStatus.value.text)
})

onShow(() => {
  getAftersaleDetail()
})

// 售后订单详情
const aftersaleData = ref({})
const getAftersaleDetail = () => {
  console.log('获取详情数据')
}

// 同意退款
const handleRefund = (btn) => {
  modal.confirm(`是否确认${btn.text}`).then(res => {
    console.log(btn.text)
    aftersaleCode.value = btn.afterViewCode
    getAftersaleDetail()
  })
}

// 同意退货退款
const handleDrawback = (btn) => {
  modal.confirm(`是否确认${btn.text}`).then(res => {
    console.log(btn.text)
    aftersaleCode.value = btn.afterViewCode
    getAftersaleDetail()
  })
}

// 同意换货
const handleExchangeGoods = (btn) => {
  modal.confirm(`是否确认${btn.text}`).then(res => {
    console.log(btn.text)
    aftersaleCode.value = btn.afterViewCode
    getAftersaleDetail()
  })
}

// 填写原返商品理由及发货信息
const handleReturnGoods = () => {
  tab.navigateTo(`/pages/aftersale/return?aftersaleCode=${aftersaleCode.value}`)
}

// 填写拒绝理由
const handleToReject = () => {
  tab.navigateTo(`/pages/aftersale/reject?aftersaleCode=${aftersaleCode.value}`)
}

// 填写退货地址
const handleToAddress = () => {
  tab.navigateTo(`/pages/aftersale/address?aftersaleCode=${aftersaleCode.value}`)
}

// 填写物流信息
const handleToDelivery = () => {
  tab.navigateTo(`/pages/aftersale/delivery?aftersaleCode=${aftersaleCode.value}`)
}

// 上拉菜单
const isShowActionSheet = ref(false)
const handleShowActionSheet = () => {
  isShowActionSheet.value = true
}
const onActionSheetClick = (actionsheet) => {
  isShowActionSheet.value = false
  eval(actionsheet.func)(actionsheet)
}
const onActionSheetCancel = () => {
  isShowActionSheet.value = false
}

// 操作栏按钮触发
const funcs = {
  'handleRefund': handleRefund,
  'handleDrawback': handleDrawback,
  'handleExchangeGoods': handleExchangeGoods,
  'handleReturnGoods': handleReturnGoods,
  'handleToReject': handleToReject,
  'handleToAddress': handleToAddress,
  'handleToDelivery': handleToDelivery,
  'handleShowActionSheet': handleShowActionSheet
}
const handleClickBtn = (btn) => {
  funcs[btn.func](btn)
}
</script>

<style lang="scss" scoped>
.page-aftersale-view {
  padding: 36rpx;
  &.has-fixed-footer {
    padding-bottom: 150rpx;
  }
  .aftersale-view-block {
    border-radius: 12rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    padding: 30rpx;
  }
  .status-wrapper {
    .status-tips {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;
    }
  }
}
</style>